<script setup>
import {defineProps,ref} from "vue";
import {useRoute, useRouter} from "vue-router";

const router = useRouter()
defineProps({
  products: {
    type: Array,
    required: true
  }
})

// 跳转详情页 获取对应商品id
const handleSkip = (id) => {
  router.push(`/detail/${id}`)
}

</script>

<template>
  <h3 class="font-bold text-red-200">推荐</h3>
  <div class="main_grid">
      <el-row :gutter="20" style="margin-left: 15px">
        <el-col :span="4" v-for="item in products" :key="item.product_id">
          <div class="main_box" @click="handleSkip(item.product_id)">
            <img :src="item.img" alt="">
            <div class="flex">
              <span>商品名称：{{ item.name }}</span>
              <span>商品价格：{{ item.price + '元' }}</span>
            </div>
          </div>
        </el-col>
      </el-row>
  </div>
</template>

<style scoped lang="scss">
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}

.flex {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}

.el-row {
  margin-bottom: 30px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  margin-bottom: 15px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

h3 {
  margin-left: 20px;
  color: white;
}

.main_grid {
  width: 1480px;
  margin: 0 auto;

  .main_box {
    cursor: pointer;
    width: 200px;
    height: 290px;
    background: white;
    border-radius: 10px;

    img {
      width: 200px;
      border-radius: 10px 10px 0 0;
      height: 220px;
    }

    span {
      margin-top: 10px;
      font-size: 14px;
      white-space: nowrap; //不换行
      overflow: hidden; //超出部分隐藏
      text-overflow: ellipsis; //文本溢出显示省略号
    }

    span:nth-child(2) {
      color: orange;
    }
  }
}
</style>